<div class="pure-form pure-form-aligned">
  
  <legend>Basic</legend>
  
  <div class="pure-control-group">
    <label>System</label>
    <input id="name" type="text" class="pure-input-1-2" placeholder="{New System}"></input>
  </div>
  
  <div class="pure-control-group">
    <label>PHP<span class="mandatory">*</span></label>
    <?php echo URL . HOME_DIR; ?><input id="php" type="text" class="pure-input-1-4" placeholder="{name}"></input>.php
  </div>
  
  <div class="pure-control-group">
    <label>Theme</label>
    <select id="theme"></select>
  </div>
  
  <div class="pure-control-group">
    <label>Type</label>
    <select id="redmd">
      <option value="0">Traditional</option>
      <option value="1">Innovative</option>
    </select>
  </div>
  
  <legend>Firewall</legend>
  
  <div class="pure-control-group">
    <label>Login Required</label>
    <input id="login_required" type="checkbox"></input>
  </div>
  
  <div class="pure-control-group">
    <label>Login Page</label>
    <select id="login"></select>
  </div>
  
  <legend>SEO</legend>
  
  <div class="pure-control-group">
    <label>Google Analytics</label>
    <input id="ga_cd" type="text" class="pure-input-1-2" placeholder="{UA-26730313-3}"></input>
  </div>
  
  <div class="pure-control-group">
    <label>Keywords</label>
    <textarea id="keywords" class="pure-input-1-2" placeholder="{Keywords}"></textarea>
  </div>
  
  <div class="pure-control-group">
    <label>Description</label>
    <textarea id="description" class="pure-input-1-2" placeholder="{Description}"></textarea>
  </div>

  <div class="pure-control-group">
    <label>&nbsp;</label>
    <button class="pure-button pure-input-1-2 pure-button-primary" onclick="submit_system();">Submit</button>
  </div>
  
</div>
<div>&nbsp;</div>

<script type="text/javascript">
  function init_system() {
    set_themes();
    set_logins();
    set_data();
  }

  function set_themes() {
    $('#theme').empty();
    $('#theme').append('<option value="0">&nbsp;</option>');
    for (var idx in __themes) {
      var itm = __themes[idx];
      $('#theme').append('<option value="' + itm.id + '">' + itm.folder +'</option>');
    }
  }

  function set_logins() {
    $('#login').empty();
    $('#login').append('<option value="0">&nbsp;</option>');
    __set_logins(__root, '');
  }

  function __set_logins(node, prefix) {
    if (node.id != 0) {
      $('#login').append('<option value="' + node.id + '" ' + ((node.id == __data[0].login_id) ? ' selected="selected"' : '') + '>' + ((prefix == '') ? '' : prefix + ') ') + node.name +'</option>');
    }
    for (var idx in node.__c) {
      var itm = node.__c[idx];
      __set_logins(itm, ((prefix == '') ? '(' : '\u2002' + prefix + '-') + (parseInt(idx, 10) + 1));
    }
  }
  
  function set_data() {
    $('#tab_sys').empty();
    if (__data.length > 0) {
      $('#tab_sys').append(((__data[0].name == '') ? 'Untitled' : __data[0].name));
      $('#tab_pages').show();

      $('#name')[0].value = __data[0].name;
      $('#php')[0].value = __data[0].php_name;
      $('#theme').val(__data[0].theme_id);
      $('#redmd').val(__data[0].redmd);
      $('#login_required')[0].checked = (__data[0].login_required == 1) ? true : false;
      $('#login').val(__data[0].login_id);
      $('#ga_cd')[0].value = __data[0].ga_cd;
      $('#keywords')[0].value = __data[0].keywords;
      $('#description')[0].value = __data[0].description;
    } else {
      $('#tab_sys').append('New System');
      $('#tab_pages').hide();

      $('#name')[0].value = '';
      $('#php')[0].value = '';
      $('#theme').val(0);
      $('#login_required')[0].checked = false;
      $('#login').val(0);
      $('#keywords')[0].value = '';
      $('#description')[0].value = '';
    }
  }
  
  function submit_system() {
    var req = {
      name: $("#name")[0].value,
      php_name: $("#php")[0].value,
      theme_id: $("#theme option:selected").val(),
      redmd: $("#redmd option:selected").val(),
      login_required: $("#login_required")[0].checked ? 1 : 0,
      login_id: $("#login option:selected").val(),
      ga_cd: $("#ga_cd")[0].value,
      keywords: $("#keywords")[0].value,
      description: $("#description")[0].value
    };
    if (__data.length > 0) {
      req.id = __data[0].id;
      req.__php_name = __data[0].php_name;
    }
    
    Ajax.request(
      'firewall.php?d=' + __dir + '&f=' + __file + '&m=submit_system',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        __data = [ rslt ];
        set_data();
        Url.insert_param('sys', rslt.id);
      },
      null
    );
  }
</script>